<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5 Emoji自定义表情编辑器DEMO演示</title>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700|Fredoka+One" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

<div class="main-content">
  <div class="emoji-name"> 
    <div>Emoji&ensp;Factory</div>
  </div>
  <div class="emoji-preview">
    <div class="emoji__wrapper">
      <div class="emoji-face">
        <div class="hat no-hat"></div>
        <div class="eyebrows">
          <div class="eyebrow left no-eyebrows"></div>
          <div class="eyebrow right no-eyebrows"></div>
        </div>
        <div class="eyes">
          <div class="eye left default"></div>
          <div class="eye right default"></div>
        </div>
        <div class="mouth default"></div>
        <div class="face-extras sweat"></div>
        <div class="item default"></div>
      </div>
    </div>
  </div>
  <div class="emoji-choices">
    <div class="emoji-choices__header">skin color</div>
    <div class="emoji-choices__group emoji-choices__group--skin">
      <div class="emoji-choice__skin selected js-choice selected" data-type="skin" data-multiple="no" data-name="skin-1"></div>
      <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-2"></div>
      <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-3"></div>
      <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-4"></div>
      <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-5"></div>
      <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-6"></div>
    </div>
    <div class="emoji-choices__header">eyes</div>
    <div class="emoji-choices__group">
      <div class="emoji-choice__item js-choice selected" data-type="eyes" data-multiple="no" data-name="default"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="startled"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="heart"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="star"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="fire"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="squeeze"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-up"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-down"></div>
      <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="lined"></div>
    </div>
    <div class="emoji-choices__header">mouth</div>
    <div class="emoji-choices__group">
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="no-mouth"></div>
      <div class="emoji-choice__item js-choice selected" data-type="mouth" data-multiple="no" data-name="default"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="upside"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="open"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="tongue"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="lined"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="frown"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="smile"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="curse"></div>
      <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="grimace"></div>
    </div>
    <div class="emoji-choices__header">eyebrows</div>
    <div class="emoji-choices__group">
      <div class="emoji-choice__item js-choice selected" data-type="eyebrows" data-multiple="no" data-name="no-eyebrows"></div>
      <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="downwards"></div>
      <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow"></div>
      <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow-far"></div>
      <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="up-far"></div>
    </div>
    <div class="emoji-choices__header">hats</div>
    <div class="emoji-choices__group">
      <div class="emoji-choice__item js-choice selected" data-type="hat" data-multiple="no" data-name="no-hat"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="round-hat"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="wizard-hat"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="sorting-hat"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="top-hat"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="traffic-cone"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="cactus"></div>
      <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="mickey"></div>
    </div>
    <div class="emoji-choices__header">
       extras <small>(Multiples allowed)</small></div>
    <div class="emoji-choices__group">
      <div class="emoji-choice__item js-choice selected" data-type="face-extras" data-multiple="yes" data-name="sweat"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="tears"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="geek-glasses"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="sunglasses"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="crescent-glasses"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="blush"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="bandage"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-gryf"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-huff"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-rave"></div>
      <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-slyt"></div>
    </div>
    <div class="emoji-choices__header">item</div>
    <div class="emoji-choices__group">
      <div class="emoji-choice__item js-choice selected" data-type="item" data-multiple="no" data-name="default"></div>
      <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="shield"></div>
      <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="dango"></div>
      <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="wand"></div>
      <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="coffee"></div>
      <div class="emoji-choice__item-custom" data-type="item" data-multiple="no" data-name="custom"><span>Type/Paste any emoji here for a custom item: </span>
        <input class="js-custom-item" maxlength="2"/>
      </div>
    </div>
  </div>
</div>
<aside class="context">
  <div class="explanation">Interested in another factory? <br/>Check out the <a href="https://codepen.io/oliviale/details/yvVVjG" target="_blank">medal factory here.</a></div>
</aside>
<footer><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>
